<template>
  <view class="page">
    <!-- 数据表 -->
    <!--    <Statistics v-if="!showBannerFlag" />-->
    <!-- Banner -->
    <!--    <Banner />-->

    <uni-section title="通知公告" subTitle="" type="line">
      <uni-notice-bar
        show-icon
        scrollable
        text="最新考试已发布"
      />
    </uni-section>
    <!-- 商品 -->
    <!--    <Goods />-->
    <!-- 功能菜单 -->

    <uni-section title="最新考试" type="line" padding>
      <uni-card padding="0" spacing="0" v-for="(item, index) in data.listb" >
        <template v-slot:cover>
          <view class="custom-cover">
            <image style="width: 100%" mode="aspectFill" :src="item.thumbnail" @click="onClickCarda(item)"></image>
            <view class="cover-content">
              <text class="uni-subtitle uni-white">{{ item.romName }}</text>
            </view>
          </view>
        </template>


      </uni-card>
    </uni-section>

    <uni-section title="最新课程" type="line" padding>
      <uni-card  padding="0" spacing="0" v-for="(item, index) in data.lista" >
        <template v-slot:cover>
          <view class="custom-cover">
            <image style="width: 100%" mode="aspectFill" :src="item.avatar" @click="onClickCardb(item)"></image>
            <view class="cover-content">
              <text class="uni-subtitle uni-white">{{ item.title }}</text>
            </view>
          </view>
        </template>
      </uni-card>
    </uni-section>
  </view>
</template>

<script setup>
  import { reactive, ref } from 'vue';
  import { onShow } from '@dcloudio/uni-app';
  import { courseApi } from '@/api/business/exam/course-api';
  import { examromApi } from '@/api/business/exam/exrom-api';

  onShow(() => {
    querypage();
  });

  const data = reactive({
    lista: [],
    listb: [],
  });

  const queryParams = {
    pageNum: 1,
    pageSize: 1,
  };

  function querypage() {
    courseApi
      .queryPage(queryParams)
      .then((res) => {
        data.lista = res.data.list;
      })
      .catch((err) => {});

    examromApi
      .queryPage(queryParams)
      .then((res) => {
        data.listb = res.data.list;
      })
      .catch((err) => {});
  }

  function change() {}

  function onClickCarda(item){
    uni.switchTab({
      url: '/pages/exrom/exrom'
    });
  }

  function onClickCardb(item){
    uni.switchTab({
      url: '/pages/course/course'
    });
  }
</script>

<style lang="scss" scoped>
  .container {
    overflow: hidden;
  }

  .custom-cover {
    flex: 1;
    flex-direction: row;
    position: relative;
  }

  .cover-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background-color: rgba($color: #000000, $alpha: 0.4);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 15px;
    font-size: 14px;
    color: #fff;
  }

  .card-actions {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 45px;
    border-top: 1px #eee solid;
  }

  .card-actions-item {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .card-actions-item-text {
    font-size: 12px;
    color: #666;
    margin-left: 5px;
  }

  .cover-image {
    flex: 1;
    height: 150px;
  }

  .no-border {
    border-width: 0;
  }
</style>
